<template>
  <div class="decision-data flex h-full bg-background text-foreground">
    <!-- 左侧：地图 -->
    <div class="w-1/2 relative">
      <div id="map" class="h-full w-full"></div>
      <div class="absolute bottom-4 left-4 bg-card text-card-foreground p-2 rounded shadow z-[1000]">
        <h3 class="font-bold mb-2">图例</h3>
        <div class="flex items-center mb-1">
          <span class="w-4 h-4 bg-red-500 rounded-full mr-2"></span>
          <span>应急专家</span>
        </div>
        <div class="flex items-center mb-1">
          <span class="w-4 h-4 bg-green-500 rounded-full mr-2"></span>
          <span>应急队伍</span>
        </div>
        <div class="flex items-center mb-1">
          <span class="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
          <span>应急车辆</span>
        </div>
        <div class="flex items-center">
          <span class="w-4 h-4 bg-yellow-500 rounded-full mr-2"></span>
          <span>视频监控</span>
        </div>
      </div>
    </div>

    <!-- 右侧：信息面板 -->
    <div class="w-1/2 bg-muted p-4 overflow-y-auto">
      <!-- 预警方案 -->
      <div class="bg-card text-card-foreground rounded-lg shadow-md p-4 mb-4">
        <h2 class="text-lg font-bold mb-4">预警方案</h2>
        <div class="mb-4">
          <input type="text" placeholder="查询预警方案" class="w-full border-input bg-background text-foreground rounded p-2">
        </div>
        <div class="space-y-2">
          <label class="flex items-center">
            <input type="checkbox" class="mr-2">
            火灾应急处置预案
          </label>
          <label class="flex items-center">
            <input type="checkbox" class="mr-2">
            化工园区火灾预案
          </label>
          <label class="flex items-center">
            <input type="checkbox" class="mr-2">
            厂区火灾应急疏散计划
          </label>
          <label class="flex items-center">
            <input type="checkbox" class="mr-2">
            综合消防应急预案
          </label>
          <label class="flex items-center">
            <input type="checkbox" class="mr-2">
            特殊危化品火灾应急预案
          </label>
        </div>
        <button class="mt-4 bg-primary text-primary-foreground px-4 py-2 rounded">启动预案</button>
      </div>

      <!-- 当前天气 -->
      <div class="bg-card text-card-foreground rounded-lg shadow-md p-4 mb-4">
        <h2 class="text-lg font-bold mb-4">当前天气</h2>
        <div class="flex items-center justify-between">
          <div>
            <p class="text-3xl font-bold">30°C</p>
            <p>晴</p>
          </div>
          <div>
            <p>2024/04/04</p>
            <p>12:00:00</p>
          </div>
        </div>
        <div class="mt-4">
          <p>空气质量：53</p>
          <p>风速：东南风2级</p>
        </div>
      </div>

      <!-- 气体数据 -->
      <div class="bg-card text-card-foreground rounded-lg shadow-md p-4 mb-4">
        <h2 class="text-lg font-bold mb-4">气体数据</h2>
        <div class="space-y-2">
          <p>PM2.5浓度: 35 μg/m³</p>
          <p>一氧化碳(CO)浓度: 0.5 mg/m³</p>
          <p>二氧化硫(SO2)浓度: 10 μg/m³</p>
          <p>PM10浓度: 50 μg/m³</p>
          <p>臭氧(O3)浓度: 3 μg/m³</p>
        </div>
      </div>

      <!-- 灾后影响评估分析 -->
      <div class="bg-card text-card-foreground rounded-lg shadow-md p-4">
        <h2 class="text-lg font-bold mb-4">灾后影响评估分析</h2>
        <div class="space-y-2">
          <p><strong>事故场景描述：</strong>化工园区内某建筑发生火灾</p>
          <p><strong>发生时间：</strong>2024年6月7日 14:30</p>
          <p><strong>地点：</strong>化工园区东侧储罐区</p>
          <p><strong>影响范围描述：</strong></p>
          <ul class="list-disc pl-5">
            <li>火灾持续时间：约2小时</li>
            <li>火灾蔓延半径：约300米</li>
            <li>受影响区域：邻近的公司和化工厂</li>
            <li>环境影响：风速3米/秒，风向西南</li>
            <li>受影响人数：约200人</li>
          </ul>
          <p><strong>事故区域：</strong>周边3公里范围</p>
          <p><strong>污染评估：</strong></p>
          <ul class="list-disc pl-5">
            <li>空气质量下降，PM2.5明显上升</li>
            <li>水体可能受到污染</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

let map = null

onMounted(() => {
  initMap()
})

onUnmounted(() => {
  if (map) {
    map.remove()
  }
})

function initMap() {
  map = L.map('map').setView([34.795, 109.942], 14)

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map)

  addMarker([34.795, 109.942], '应急指挥中心', 'red')
  addMarker([34.797, 109.945], '应急队伍', 'green')
  addMarker([34.793, 109.940], '视频监控', 'yellow')
}

function addMarker(position, title, color) {
  const marker = L.circleMarker(position, {
    radius: 8,
    fillColor: color,
    color: '#000',
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
  }).addTo(map)

  marker.bindPopup(title)
}
</script>

<style>
.decision-data {
  height: calc(100vh - 64px); /* 假设顶部导航栏高度为64px，根据实际情况调整 */
}

#map {
  height: 100%;
  width: 100%;
}
</style>
